<template>
  <header class="header">
    <div class="head">
      <el-menu :default-active="$store.state.activeNavIndex" text-color="#323c47" class=" head-menu" mode="horizontal">
        <el-submenu index="6" class="user">
          <template slot="title">{{ user.loginName }}</template>
          <el-menu-item index="6-1" @click="dialog.visible = true">修改密码</el-menu-item>
          <el-menu-item index="6-2" @click="logout">退出</el-menu-item>
        </el-submenu>

        <el-menu-item v-for="(item,index) in $store.state.navData" :key="''+index+''" :index="''+index+''" @click="showChildNav(item,index)">
          {{ item.name }}
          <!-- <i class="el-icon-arrow-down"></i> -->
        </el-menu-item>

      </el-menu>
      <!-- <el-input class="mainSearch" v-model="input" size="mini" placeholder="请输入内容"></el-input> -->
    </div>

    <el-dialog :visible.sync="dialog.visible" width="350px">
      <el-form ref="dialogForm" :model="dialog.form" :rules="dialog.rules" label-width="90px">
        <el-form-item label="新密码" prop="pswd1">
          <el-input v-model="dialog.form.pswd1" show-password />
        </el-form-item>
        <el-form-item label="重复密码" prop="pswd2">
          <el-input v-model="dialog.form.pswd2" show-password />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="modifyPass">确 定</el-button>
      </span>
    </el-dialog>
  </header>
</template>

<script>
import Util from '@/libs/util'
import Axios from '@/libs/axios'

export default {
  data() {
    return {
      user: Util.getlocalStorage('user') || {},
      dialog: {
        visible: false,
        form: {
          pswd1: '',
          pswd2: ''
        },
        rules: {
          pswd1: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 5,
            max: 20,
            message: '密码长度为 5 到 20 位字符',
            trigger: 'blur'
          }
          ],
          pswd2: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 5,
            max: 20,
            message: '密码长度为 5 到 20 位字符',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              if (value != '' || value == this.dialog.form.pswd1) {
                callback()
              } else {
                callback(new Error('两次输入密码不一致!'))
              }
            },
            trigger: 'blur'
          }
          ]
        }
      }
    }
  },
  mounted: function() {
  },
  methods: {
    showChildNav(item, index) {
      this.$store.commit('SET_activeNav', index)
      this.$store.commit('SET_activeNav2', 100)
    },
    modifyPass() {
      const _this = this
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          const loading = Util.loading()
          Axios.axiosInstance.post('/System/System/ChangePassword', _this.dialog.form).then((response) => {
            loading.close()
            _this.dialog.visible = false
            _this.$message({
              message: '修改成功，请重新登录',
              type: 'success'
            })

            _this.logout()
          })
        }
      })
    },
    logout() {
      const loading = Util.loading()
      Axios.axiosInstance.get('/System/System/ACHIMS_LogOut').then((response) => {
        const _this = this
        setTimeout(function() {
          loading.close()
          Util.removelocalStorage('user')
          // _this.$store.commit('SET_user', {})
          // 清空菜单
          _this.$store.commit('SET_navData', [])

          _this.$router.replace({
            path: '/login'
          })
        }, 500)
      }).catch((err) => {
        setTimeout(function() {
          loading.close()
        }, 1000)
        return err
      })
    }
  }
}
</script>
<style scoped lang="scss">
.head {
    display: flex;
    align-items: center;
    .head-menu {
        width: 100%;
        border-bottom: none;
        .user {
            float: right;
        }
        .link {
            display: block;
        }
    }
    // .mainSearch {
    //     flex: 1;
    // }
}
</style>
